<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>英雄列表</caption>
    <tr>
        <th>名字</th><th>类型</th><th>价格</th>
    </tr>
</table>
<!--引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    let arr=[{name:"刘备",type:"战士",money:13888},
        {name:"黄忠",type: "射手",money: 6888},
        {name: "荆轲",type: "刺客",money: 18888}]
    //遍历数组
    for(let i=0;i<arr.length;i++){
        let hero=arr[i];//取出数组中的对象
        //创建tr和td
        let tr=$("<tr></tr>");
        let nametd=$("<td></td>");
        let typetd=$("<td></td>");
        let moneytd=$("<td></td>");
        //将对象中的数据装进3个td
        nametd.text(hero.name);
        typetd.text(hero.type);
        moneytd.text(hero.money)
        //把td装进tr 把tr装进table
        tr.append(nametd);
        tr.append(typetd);
        tr.append(moneytd);
        $("table").append(tr);
    }
</script>
</body>
</html>